// 1.渲染成绩列表
function initScoreList() {

  axios({
    url: '/score/list',
    method: 'get',

  }).then(({ data: res }) => {
    //成功回调
    // console.log(res)
    // 渲染到页面
    if (res.code == 0) {
      let arr = []
      // 遍历数据
      for (let k in res.data) {
        arr.push(`
        <tr>
        <th scope="row">${k}</th>
        <td>${res.data[k].name}</td>
        <td data-id="${k}" data-batch="1" class="score">${res.data[k].score[0]}</td>
        <td data-id="${k}" data-batch="2" class="score">${res.data[k].score[1]}</td>
        <td data-id="${k}" data-batch="3" class="score">${res.data[k].score[2]}</td>
        <td data-id="${k}" data-batch="4" class="score">${res.data[k].score[3]}</td>
        <td data-id="${k}" data-batch="5" class="score">${res.data[k].score[4]}</td>
      </tr> 
        `)
      }
      document.querySelector('tbody').innerHTML = arr.join('')
    }

  });
}
initScoreList()


// 需求2 点击td内容变成input
document.querySelector('tbody').onclick = function (e) {
  if (e.target.className == 'score') {
    let input = document.createElement('input')
    // 后面失去光标后要回复值 所以保存
    let num = e.target.innerHTML

    input.value = e.target.innerHTML  //先给input 设置td中的值
    e.target.innerHTML = ''   //然后再清空td
    e.target.appendChild(input)  //然后再添加input
    //获取插入条光标
    input.focus()
    // 需求3. blur/keyup事件 不能做事件委托 所以产生一个input 绑定一个blur 事件
    input.onkeyup = function (e) {
      if (e.keyCode != 13) {
        return
      }
      // 发送ajax
      axios({
        url: '/score/entry',
        method: 'POST',
        data: {
          "stu_id": this.parentNode.getAttribute('data-id'),
          "batch": this.parentNode.getAttribute('data-batch'),
          "score": this.value
        }

      }).then(({ data: res }) => {
        //成功回调
        // console.log(res)
        if (res.code == 0) {
          toastr.success(res.message)
          initScoreList()
        }
      });
    }
    // 失去校验 数据恢复
    input.onblur = function () {
      e.target.innerHTML = num
    }
  }

}